<template>
  <borderbox
    :bordermodel="bordermodel"
    :height="vheight"
    :title="title"
    :iconclass="iconclass"
    :iconcolor="iconcolor"
    :titlecolor="titlecolor"
    :decorationmodel="decorationmodel"
  >
    <div
      class="echart"
      :id="controlid"
      :style="{
        float: 'left',
        width: '100%',
        height: title === '' ? '100% ' : 'calc(100% - 40px)'
      }"
    ></div
  ></borderbox>
</template>

<script>
/* eslint-disable */
import tdTheme from './theme.json' // 引入默认主题
import * as echarts from 'echarts'
import borderbox from '@/components/borderbox/index.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  methods: {
    initChart() {
      // this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
      this.getchart = echarts.init(
        document.getElementById(this.controlid),
        tdTheme
      )
      this.getchart.setOption(this.options)
      // // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.resize()
      })
    },
    resize() {
      this.getchart.resize()
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      }
      return false
    },
    setOption() {
      this.getchart.setOption(this.options, true)
    }
  },
  components: { borderbox },
  watch: {
    options: {
      handler(options) {
        // 设置true清空echart缓存
        this.getchart.setOption(options, true)
      },
      deep: true
    },
    height(val) {
      if (val !== undefined && val !== '') {
        if (typeof val === 'number') {
          this.vheight = val + 'px'
          this.eheight = val - 30 + 'px'
        } else if (this.isNumber(val)) {
          this.vheight = val + 'px'
          this.eheight = parseInt(val) - 30 + 'px'
        } else {
          this.vheight = val
        }
      }
    },
    bordermodel(val) {
      this.controlid =
        'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  data() {
    return { controlid: '', getchart: {}, vheight: '230px', eheight: '200px' }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  props: [
    'options',
    'height',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  mounted() {
    if (this.height !== undefined && this.height !== '') {
      if (typeof this.height === 'number') {
        this.vheight = this.height + 'px'
        this.eheight = this.height - 30 + 'px'
      } else if (this.isNumber(this.height)) {
        this.vheight = this.height + 'px'
        this.eheight = parseInt(this.height) - 30 + 'px'
      } else {
        this.vheight = this.height
      }
    }
    const _this = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById(this.controlid), () => {
      _this.$nextTick(() => {
        _this.resize()
      })
    })

    this.$nextTick(() => {
      this.initChart()
    })
  }
}
</script>
